<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{title}}
  </div>

  <!-- <script src="http://unpkg.com/vue@next"></script> -->
  <script>
    // 基本结构
    const Vue = {
      createApp(options) {
        const render = Vue.createRenderer({
          querySelector(selector) {
            return document.querySelector(selector)
          },
          insert(child,parent,anchor) {
            parent.insertBefore(child,anchor || null)
          }
        })
        return render.createApp(options)
      },
      createRenderer({querySelector, insert}) {
        return {
          createApp(options) {
            return {
              mount(selector) {
                const parent = querySelector(selector);
                if (options.setup) {
                  this.setupState = options.setup()
                }else {
                  this.data = options.data();
                }
                this.proxy = new Proxy(this,{
                  get(target,key) {
                    if(key in target.setupState) {
                      return target.setupState[key]
                    }else {
                      return target.data[key]
                    }
                  },
                  set(target,key,val) {
                    if(key in target.setupState) {
                      target.setupState[key] = val
                    }else {
                      target.data[key] = val
                    }
                  }
                })
                if(!options.render) {
                  options.render = this.compile(parent.innerHTML)
                }
                const el = options.render.call(this.proxy)
                parent.innerHTML = ''
                insert(el,parent)
              },
              compile(template){
                return function render() {
                  const h3 = document.createElement("h3")
                  h3.textContent = this.title;
                  return h3
                }
              }
            }
          }
        }
      }
    }
  </script>
  <script>
    // vue2 new Vue({})
    // vue3 createApp({})
    const {createApp} = Vue
    createApp({
      data() {
        return {
          title:'你的发过红酒'
        }
      },
      setup() {
        return {
          title:'你的发过红酒2344'
        }
      }
    }).mount("#app")
  </script>
</body>

</html>